<template>
    <div class="NavHeader">
        <div class="header">
            <div class="header-left">
                <span>小米商城</span>
                <span>MIUI</span>
                <span>IoT</span>
                <span>云服务</span>
                <span>金融</span>
                <span>有品</span>
                <span>小爱开发平台</span>
            </div>
            <div class="header-right">
                <span>登录</span>
                <div class="shopcar">
                    <img src="@/assets/imgs/icon-cart-checked.png" alt="" />
                    <span>购物车</span>
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="logo">
                <img src="@/assets/imgs/mi-logo.png" alt="" />
            </div>
            <div class="menu">
                <span @mouseover="showDiv(1)" @mouseout="hideDiv()">电视</span>
                <span @mouseover="showDiv(2)" @mouseout="hideDiv()"
                    >小米手机</span
                >
                <span>RedMi红米</span>
                <span>笔记本</span>
                <span>路由器</span>
                <span>家电</span>
            </div>
            <el-input>
                <template slot="append">
                    <img src="@/assets/imgs/icon-search.png" alt="" />
                </template>
            </el-input>
        </div>
        <div class="tv" v-if="isTv">
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-1.jpg" alt="" />
                </div>
                <div class="tvName">小米壁画电视 65英寸</div>
                <div class="tvPrice">6999</div>
            </div>
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-2.jpg" alt="" />
                </div>
                <div class="tvName">小米全面屏电视 55英寸</div>
                <div class="tvPrice">1899</div>
            </div>
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-3.png" alt="" />
                </div>
                <div class="tvName">小米电视4A 32英寸</div>
                <div class="tvPrice">799</div>
            </div>
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-4.jpg" alt="" />
                </div>
                <div class="tvName">小米电视4A 55英寸</div>
                <div class="tvPrice">1299</div>
            </div>
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-5.jpg" alt="" />
                </div>
                <div class="tvName">小米电视4A 65英寸</div>
                <div class="tvPrice">2799</div>
            </div>
            <div class="tvItem">
                <div class="tvImg">
                    <img src="@/assets/imgs/nav-img/nav-3-6.png" alt="" />
                </div>
                <div class="tvName">Redmi 红米电视 70英寸 R70A</div>
                <div class="tvPrice">3499</div>
            </div>
        </div>
        <div class="phone" v-if="isPhone">
            <div class="phoneItem" v-for="item in phoneList" :key="item.id">
                <el-image :src="item.mainImage"></el-image>
                <div class="itemName">{{ item.name }}</div>
                <div class="itemPrice">{{ item.price }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "NavHeader",
    data() {
        return {
            phoneList: [],
            isTv: false,
            isPhone: false,
        };
    },
    created() {
        this.$axios
            .get("../../static/json/nav.json")
            .then((res) => {
                this.phoneList = res.data.data.list;
            })
            .catch((err) => console.log(err));
    },
    methods: {
        showDiv(num) {
            if (num == 1) {
                this.isTv = true;
            } else {
                this.isPhone = true;
            }
        },
        hideDiv() {
            this.isTv = false;
            this.isPhone = false;
        },
    },
};
</script>

<style lang="less">
.NavHeader {
    margin-bottom: 30px;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50px 0 20px;
        height: 40px;
        background-color: #333;
        .header-left {
            span {
                color: #98a6a9;
                line-height: 40px;
                font-size: 12px;
                padding: 0 10px;
            }
        }
        .header-right {
            display: flex;
            align-items: center;
            line-height: 40px;
            font-size: 12px;
            span {
                color: #98a6a9;
            }
            .shopcar {
                margin-left: 20px;
                background-color: #ff6600;
                color: #fff;
                height: 40px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    display: block;
                    margin-right: 10px;
                    width: 17px;
                }
                span {
                    color: #fff;
                }
            }
        }
    }
    .nav {
        margin-top: 30px;
        padding-left: 20px;
        padding-right: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo {
            width: 50px;
            height: 50px;
            background-color: #ff6600;
        }
        .menu {
            span {
                margin: 0 10px;
                font-weight: bold;
                cursor: pointer;
            }
            span:hover {
                color: #ff6600;
                cursor: pointer;
            }
        }
        .el-input {
            width: 300px;
            img {
                width: 15px;
                display: block;
            }
        }
    }
    .tv {
        position: absolute;
        background-color: #fff;
        top: 150px;
        left: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;
        .tvItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            .tvImg {
                width: 250px;
                border-right: 1px solid #ddd;
                img {
                    width: 160px;
                    display: block;
                    margin: 0 auto;
                }
            }
            .tvName {
                margin-top: 20px;
                margin-bottom: 5px;
                font-size: 14px;
                font-weight: bold;
            }
            .tvPrice {
                font-size: 12px;
                color: #ff6600;
                font-weight: 600;
            }
        }
    }
    .phone {
        position: absolute;
        background-color: #fff;
        top: 150px;
        left: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;
        .phoneItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            .el-image {
                width: 250px;
                border-right: 1px solid #ddd;
                img {
                    width: 150px;
                    display: block;
                    margin: 0 auto;
                }
            }
            .itemName {
                margin-top: 20px;
                margin-bottom: 5px;
                font-size: 14px;
                font-weight: bold;
            }
            .itemPrice {
                font-size: 12px;
                color: #ff6600;
                font-weight: 600;
            }
        }
    }
}
</style>